﻿<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>自定义右键菜单</title>
<!--autor: carriehuang | QQ:453555909 | 转载需注明原处-->
<head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .div{
        	width: 334px;
        	height: 336px;
            background-color: #fff;
        	position: absolute;
        	border: 1px solid #bababa;
        	display: none;
        	font-family: "微软雅黑";
        	font-size: 15px;
        	box-shadow: 6px 6px 5px#878787;
        }
        
        .div ul{
        	width: 332px;
        	height: 334px;
        	border: 1px solid #ededed;
        }
        .div li{
        	list-style: none;
        	
        }
        .border-b {
        	border-bottom:1px solid #e9e9e9;
        }
         .left{
        	width: 46px;
      		float: left;
      		height: 30px;
        	line-height: 30px;	
      	}
      	.center{
  		    width: 50%;
      		float: left;
      		
      	}
      	.right{
  		    width: auto;
  		    padding-left: 5px;
      		float: left;
      	}
      	.c-a9a{
      		color: #a9a192;
      	}
        .div li a{ 
        	display: block;
        	color: #000;
        	width: 100%;
        	height: 30px;
        	line-height: 30px;	
    	}
        .div li a:hover{ 
        	background-color: #ebebeb;
    	}	
        .div li a:hover .right{
        	color: #000;
        }
    </style>
</head>
<body>
<div class="div" id="j_div">
	<ul>
		<li><a href="javascript:;"><div class="left"></div><div class="center c-a9a">返回(B)</div><div class="right c-a9a">Alt+向左箭头</div></a></li>
		<li><a href="javascript:;"><div class="left"></div><div class="center c-a9a">前进(F)</div><div class="right c-a9a">Alt+向右箭头</div></a></li>
		<li class="border-b"><a href="javascript:;"><div class="left"></div><div class="center">重新加载(R)</div><div class="right c-a9a">Ctrl+R</div></a></li>
		<li><a href="javascript:;"><div class="left"></div><div class="center">另存为(A)...</div><div class="right c-a9a">Ctrl+R</div></a></li>
		<li><a href="javascript:;"><div class="left"></div><div class="center">打印(P)...</div><div class="right c-a9a">Ctrl+P</div></a></li>
		<li><a href="javascript:;"><div class="left"></div><div class="center">投射...</div><div class="right c-a9a"></div></a></li>
		<li class="border-b"><a href="javascript:;"><div class="left"></div><div class="center c-a9a">翻译成中文（简体）(T)</div><div class="right c-a9a"></div></a></li>
		<li><a href="javascript:;"><div class="left"></div><div class="center">当前网页生成二维码...</div><div class="right c-a9a"></div></a></li>
		<li><a href="javascript:;"><div class="left"></div><div class="center c-a9a">查看网页源代码(V)</div><div class="right c-a9a">Ctrl+U</div></a></li>
		<li><a href="javascript:;"><div class="left"></div><div class="center c-a9a">检查(N)</div><div class="right c-a9a">Ctrl+N</div></a></li>
		<li><a href="javascript:;"><div class="left"></div><div class="center c-a9a">爱不爱我(M)</div><div class="right c-a9a">L+O+V+E</div></a></li>
		
	</ul>
</div>
<script type="text/javascript">

    window.onload=function(){

		  	var oDiv = document.getElementById('j_div');
		  	
				
				/* 事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情
				 * 怎么阻止？
				 * 想找到源头，当前这个行为是什么事件触发的，然后在这个事件的处理函数中使用 return false
				 */
				//oncontextmenu: 右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发
				document.oncontextmenu = function(ev){
					var ev = ev || event;
						oDiv.style.display = 'block';
						oDiv.style.left = ev.clientX +'px';
						oDiv.style.top = ev.clientY +'px';
					return false;
				}
		  	
		}
</script>
</body>

</html>
